import React, { useState, useEffect } from 'react';
import Modal from './modal';
import styles from '../index.less';

// 临时存储KEY
const TitleKey = 'WELCOME_TEXT';

type WelcomeProps = {
  onEdit: (show: boolean) => void;
};

const Welcome: React.FC<WelcomeProps> = (props) => {
  const [title, setTitle] = useState('');
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    setTitle(localStorage.getItem(TitleKey) || '');
  }, []);

  return (
    <>
      {/* 标题 */}
      <div className={styles.header}>
        <div className={styles.title}>和顺肉牛大数据平台</div>
      </div>

      <div className={styles.welcome + ' ' + styles.layout}>
        <div className={styles.welcomeTitle}>{!showModal && title}</div>

        {/* 编辑弹出框 */}
        <Modal
          visible={showModal}
          value={title}
          onSubmit={(value: string) => {
            setShowModal(false);
            props.onEdit(false);
            setTitle(value);
            localStorage.setItem(TitleKey, value);
          }}
          onCancel={() => {
            setShowModal(false);
            props.onEdit(false);
          }}
        />
        <div
          className={styles.editBtn}
          onClick={() => {
            setShowModal(true);
            props.onEdit(true);
          }}
        >
          编辑
        </div>
      </div>
    </>
  );
};

export default Welcome;
